<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 550
			canvas.height = 400

			var offset = 0

			function draw() {
				cxt.clearRect(0,0,canvas.width,canvas.height)
				cxt.strokeStyle = 'red'
				cxt.setLineDash([4, 2])
				cxt.lineDashOffset = -offset
				cxt.strokeRect(10, 10, 100, 100)	
			}
			
			function march() {
				offset++
				if(offset > 16) {
					offset = 0
				}
				
				draw()
				setTimeout(march,20)
			}
			march()
		</script>
	</body>

</html>